<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>03_JSX语法</title>
    <!-- react.js react核心文件，支持react语法 -->
    <script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
    <!-- react-dom.js 支持reacj有关dom的操作 -->
    <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
    <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
</head>
<body>
    <div id="app"></div>
    <!-- 如果想要在script标签里书写jsx代码，需要设置script标签的type属性，值为：text/babel -->
    <script type="text/babel">
        /* jsx语法：可以让我们利用js的语法书写html，其本质就是React.createElement()的语法糖 */
        let app = document.getElementById("app");
        let newH2 = <h2 id="el2">hello,react!</h2>;
        ReactDOM.render(newH2,app)

        let elediv = <div id="div1"><p className="elp">hi,react</p></div>
        ReactDOM.render(elediv,app)

        let ul1 = <ul>
                <li className="li1">这是列表项li1</li>
                <li className="li2">这是列表项li2</li>
                <li className="li3">这是列表项li3</li>
            </ul>
        ReactDOM.render(ul1,app)

        /* 
        书写JSX语法时的注意事项
        1、JSX语法的结构可以被包裹在小括号里，小括号也可以不写
        2、JSX语法结构里，可以写注释，但是注释比较特殊
        3、JSX的语法结构里，可以通过{}进行声明式渲染，在react里，react的编译环境是1个{}
        4、如果JSX的语法结构里需要书写单标签，单标签必须以/结尾，不然会报错
        5、JSX语法结构里，有且只能有一个根标签
        */

        let msg = "hello,JSX"
        let a=10
        let b=20
        let arr=[1,2,3,4,5]
        ReactDOM.render((
            <div className="warp">
                {/* 这是JSX里的注释 */}
                <p>msg的值是：{msg}</p>
                <p>a+b的值是：{a+b}</p>
                <input type="text" />    
            </div>
        ),app)

        // React里的列表渲染 类似于vue的v-for; React里没有指令，所谓的列表渲染直接使用的是原生的数组或者对象的遍历方法，这里为了兼顾数组或者对象的变量，我们使用map方法
        // 遍历数组
        let personInfo = [
            {name:'瓶盖资源网',year:2021,zz:'黑侠'},
            {name:'瓶盖导航网',year:2019,zz:'黑侠'},
            {name:'全网码商',year:2019,zz:'黑侠'}
        ]
        ReactDOM.render((
            <ul>
                {
                    personInfo.map((v,i)=>{
                        return <li key={i}>第{i+1}人，名字{v.name}，时间{v.year}，作者{v.zz}</li>
                    })
                }    
            </ul>
        ),app)
        
        // 遍历对象
        let obj = {
            name:'黑侠',
            age:21,
            school:'黑侠大学',
            sex:'男',
            tel:12345678911
        }
        ReactDOM.render((
            Object.keys(obj).map((v,i)=>{
                return <p key={v}>key:{v},value:{obj[v]}</p>
            })
        ),app)
    </script>
</body>
</html>